<template>
  <div id="app">
    <h1>Vue3 + TS 子应用</h1>
    <p v-if="role === 'admin'">管理员可见的内容</p>
    <p v-if="role === 'user'">普通用户可见的内容</p>
    <p v-if="role === 'guest'">访客可见的内容</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';

export default defineComponent({
  name: 'App',
  setup() {
    const role = ref('guest');

    onMounted(() => {
      // 监听基座应用发送的数据
      window.microApp?.addDataListener((data: any) => {
        role.value = data.role;
      });

      // 向基座应用发送数据
      window.microApp?.dispatch({ message: 'Hello from Vue3 + TS App' });
    });

    onBeforeUnmount(() => {
      window.microApp?.clearDataListener();
    });

    return {
      role,
    };
  },
});
</script>
